<template>
	<view class="container">
		<up-form labelPosition="left" :model="form" :rules="rules" ref="formRef">
			<up-form-item label="队伍名称" prop="teamName" borderBottom label-width="150rpx">
				<up-input v-model="form.teamName" border="none" placeholder="请输入队伍名称"></up-input>
			</up-form-item>
			<up-form-item label="描述" prop="description" borderBottom label-width="150rpx">
				<up-textarea placeholder="请输入队伍描述" v-model="form.description" count></up-textarea>
			</up-form-item>
			<up-form-item label="过期时间" prop="expireTime" borderBottom label-width="150rpx" @click="showDate = true" >
				<up-input v-model="form.expireTime" disabled disabledColor="#ffffff" placeholder="请选择过期时间" border="none"></up-input>
				<template #right>
					<up-icon name="arrow-right"></up-icon>
				</template>
			</up-form-item>
			<up-form-item label="最大人数" prop="maxNum" borderBottom label-width="150rpx">
				<up-number-box :min="1" :max="5" v-model="form.maxNum"></up-number-box>
			</up-form-item>
			<up-form-item label="队伍状态" prop="teamState" borderBottom label-width="150rpx">
				<up-radio-group v-model="form.teamState">
					<up-radio :customStyle="{ marginRight: '16px' }" v-for="(item, index) in teamStateList" :key="index"
						:label="item.name" :name="item.teamState"></up-radio>
				</up-radio-group>
			</up-form-item>
			<up-form-item label="队伍密码" prop="teamPassword" borderBottom label-width="150rpx" v-if="form.teamState==2">
				<up-input v-model="form.teamPassword" border="none" placeholder="请输入队伍密码"></up-input>
			</up-form-item>
		</up-form>
		<up-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit" shape="circle"></up-button>
		<up-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset" shape="circle"></up-button>
		<up-datetime-picker  :minDate="new Date()" :show="showDate" v-model="expireTime" mode="date" closeOnClickOverlay @confirm="dateConfirm" @cancel="dateClose" @close="dateClose"></up-datetime-picker>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';
import myAxios from "@/plugins/myAxios";
	const formRef = ref(null);
	const showDate = ref(false);
	const expireTime = ref(Number(new Date()));
	const form = reactive({
		teamName: '',
		expireTime: new Date().toISOString().split('T')[0],
		teamState: null,
		description: '',
		teamPassword: '',
		maxNum: 1,
	});

	// 队伍状态选项
	const teamStateList = [
		{ name: '公开', disabled: false, teamState: 0 },
		{ name: '私密', disabled: false, teamState: 1 },
		{ name: '加密', disabled: false, teamState: 2 },
	];

	// 校验规则
	const rules = {
		teamName: [
			{ required: true, message: '请输入队伍名称', trigger: 'blur' },
			{ min: 2, max: 20, message: '队伍名称长度为2-20个字符', trigger: 'blur' },
		],
		teamPassword: [
			{
				required: true,
				message: '请输入队伍密码',
				trigger: 'blur',
				validator: (rule, value, callback) => {
					if (form.teamState === 2 && (!value || value.length < 6)) {
						callback(new Error('加密队伍密码长度至少为6位'));
					} else {
						callback();
					}
				},
			},
		],
	};

	// 关闭日期选择
	const dateClose = () => {
		showDate.value = false;
	};

	// 确认日期选择
	const dateConfirm = (e: any) => {
		showDate.value = false;
		form.expireTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
	};

	// 提交表单
	const submit = () => {
		formRef.value
			?.validate()
			.then(async() => {
				 console.log('点击事件触发'); 
				  const res = await myAxios.post("/team/add",form)
				  if(res?.code === 0 && res){
				    showSuccessToast('添加成功');
				uni.switchTab({
					url: "/pages/team/index", // 路径改为uni-app的页面路径
				});
				  }else {
				    showFailToast('添加失败'+res.description);
				  }
			})
			.catch((e) => {
				uni.$u.toast(e.message);
			});
	};

	// 重置表单
	const reset = () => {
		formRef.value?.resetFields();
		formRef.value?.clearValidate();
	};
</script>

<style lang="scss">
	.container {
		padding: 15px;
	}
</style>
